<template>
  <div class="main">
    <div class="searchBox clearfix">    
    	<div class="searchContent ">
    		<el-input
			  placeholder="对接系统名"
			  v-model="param.systemName"
			  clearable>
			</el-input>
			<el-input
			  placeholder="系统编码"
			  v-model="param.systemCode"
			  clearable>
			</el-input>			
			<el-button @click="tableList">查找</el-button> 
			<el-button @click="systemDialog('','新增系统',1)">添加</el-button>  				
    	</div>    	
    </div>
    <div class="tableList">
	    <el-table :data="list.rows"  border  > 
	    	<el-table-column type="expand">
	    		<template slot-scope="scope" > 
				    <el-table :data="scope.row.thirdPartyDockingDetailDTOS" border label-position="left"   >
				        <el-table-column label="功能名称"  > 
				           <template slot-scope="scop">
				                <span>{{ scop.row.functionName }}</span>
				            </template>           
				        </el-table-column>
						 <el-table-column label="功能编码"> 
				           <template slot-scope="scop">
				                <span>{{ scop.row.functionCode}}</span>
				            </template>           
				        </el-table-column>				       
				        <el-table-column label="接口地址" width="400"> 
				           <template slot-scope="scop">
				                <span>{{ scop.row.url }}</span>
				            </template>           
				        </el-table-column>
				        <el-table-column label="请求方式"  width="150"> 
				           <template slot-scope="scop">
				                <span>{{ scop.row.requestMode }}</span>
				            </template>           
				        </el-table-column>
				        <el-table-column label="超时（ms）"  width="150"> 
				           <template slot-scope="scop">
				                <span>{{ scop.row.timeout }}</span>
				            </template>           
				        </el-table-column>
				        <el-table-column label="备注" > 
				           <template slot-scope="scop">
				                <span>{{ scop.row.remark }}</span>
				            </template>           
				        </el-table-column>         				        
				        <el-table-column  label="操作">
					      <template slot-scope="scop">
					        <el-button
					          size="mini"
					          class="greenBtn"
					          @click="functionDialog(scop.row,'编辑功能',0)">编辑</el-button>
					          <el-button
					          size="mini"
					          class="orangeBtn"
					          @click="deleteFun(scop.row)">删除</el-button>					      
					      </template>
					    </el-table-column>			       
				    </el-table>
			    </template>      
	        </el-table-column> 	
	        <el-table-column  label="系统名称" > 
	           <template slot-scope="scope">
	                <span>{{ scope.row.thirdPartySystemDTO.systemName }}</span>
	            </template>           
	        </el-table-column>        
	        <el-table-column label="系统编码">
	            <template slot-scope="scope">
	                 <span>{{ scope.row.thirdPartySystemDTO.systemCode }}</span>
	            </template>
	        </el-table-column>

	        <el-table-column label="备注">
	            <template slot-scope="scope">
	                <span>{{ scope.row.thirdPartySystemDTO.remark }}</span>
	            </template>
	        </el-table-column>	      
	        <el-table-column label="操作">
	            <template slot-scope="scope">
	            	<el-button
			          size="mini"
			          class="blueBtn"
			          @click="functionDialog(scope.row,'新增功能',1)">新增</el-button>
			          <el-button
			          size="mini"
			          type="danger"
			          class="greenBtn"			       
						@click="systemDialog(scope.row,'编辑系统',0)"
			          >编辑</el-button>	
	                <el-button
			          size="mini"
			          class="orangeBtn"
			          @click="deleteSystem(scope.row.thirdPartySystemDTO)">删除</el-button>
		        		     
	            </template>
	        </el-table-column>	    	                 
	    </el-table>
    </div>  
    <div class="pagination">   
         <el-pagination
            @size-change="changeNum"
            @current-change="changePage"
            :current-page="param.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="param.pageSize"
            layout="total, prev, pager, next,sizes"
            :total="list.total">
        </el-pagination>
    </div>
<!--系统添加  编辑 -->
		<system ref="detailDialog" @fatherMethod="tableList" ></system>	

<!-- 功能新增编辑 -->
	<fun ref="detailDialogFun" @fatherMethod="tableList" ></fun>	

  </div>
</template>

<script>
import { mapState } from 'vuex';
import system from '@/components/addEditSystem';
import fun from '@/components/addEditFun';
// import showImg from '@/components/showImg';

export default {
	name: 'leasingInfo',
	components:{system,fun},
	data () {
		return {					
			systemListUrl:'/thirdparty/page',
			systemAddUrl:'/thirdparty/system/add',
			systemEditUrl:'/thirdparty/system/update',	
			systemDeleteUrl:'/thirdparty/system/delete',
			funAddUrl:'/thirdparty/function/add',
			funEditUrl:'/thirdparty/function/update',
			funDeleteUrl:'/thirdparty/function/delete',
			param: {				
					systemName:null, 
					systemCode:null,                         
	                pageNum: 1,
	                pageSize: 10,                    	                	            
			},	
			  				
			
		}
	},
	methods: { 		
	    changeNum(val) {   
	 		this.param.pageNum=1;        
	        this.param.pageSize = val; 
	        this.$store.dispatch('getlist',{param:this.param,url:this.systemListUrl});       
	    },
	    changePage(val) { 
	        this.param.pageNum=val;   
	       this.$store.dispatch('getlist',{param:this.param,url:this.systemListUrl});       
	       
	    }, 
	    tableList(){
			// this.param.pageNum=1;
	    	this.$store.dispatch('getlist',{param:this.param,url:this.systemListUrl}); 
	    },	   
	    systemDialog(item,title,type){//添加&编辑 系统		    		    	
	    	if(type==1){	    		
				this.$refs.detailDialog.loadDialogData(item,title,this.systemAddUrl);
	    	}else{
				this.$refs.detailDialog.loadDialogData(item,title,this.systemEditUrl);
	    	}	    		    		    
	    },
	    functionDialog(item,title,type){
	    	if(type==1){	    		
				this.$refs.detailDialogFun.loadDialogData(item,title,this.funAddUrl,type);
	    	}else{
				this.$refs.detailDialogFun.loadDialogData(item,title,this.funEditUrl,type);
	    	}	
	    },	
	    //删除  系统  
	    deleteSystem(item){
	    	this.$confirm('确定删除该系统？')
			.then(_ => {				
				this.$store.dispatch('getlist',{param:{thirdPartyId:item.thirdPartyId},url:this.systemDeleteUrl}).then(() => {
	                if(this.addEdit.code==0){
	                  this.$message({
	                    message: this.addEdit.msg,
	                    type: 'success'
	                  });               				
					this.param.pageNum=1;  
					this.tableList();	                       
					//  this.$store.dispatch('getlist',{param:this.param,url:this.systemListUrl});  
					 
	                }else{
	                   this.$message({
	                    message: this.addEdit.msg,
	                    type: 'warning'
	                  }); 
	                }              
              }).catch(() => {
                   this.$message({
                    message: this.addEdit.msg,
                    type: 'success'
                  }); 
                 
              })


			}).catch(_ => {});
	    },
	    //删除功能
	    deleteFun(item){
	    	this.$confirm('确定删除该功能？')
			.then(_ => {				
				this.$store.dispatch('getlist',{param:{dockingDetailId:item.dockingDetailId},url:this.funDeleteUrl}).then(() => {
	                if(this.addEdit.code==0){
	                  this.$message({
	                    message: this.addEdit.msg,
	                    type: 'success'
	                  });               
	                  // this.dialogVisible=false;  	                       
	                 this.tableList();  
	                }else{
	                   this.$message({
	                    message: this.addEdit.msg,
	                    type: 'warning'
	                  }); 
	                }              
				}).catch(() => {
					this.$message({
						message: this.addEdit.msg,
						type: 'success'
					});                  
				})
			}).catch(_ => {});
	    }
	        
	},
	created() {   	
       this.$store.dispatch('getlist',{param:this.param,url:this.systemListUrl});              
    },
    computed:{
    	...mapState(['list','addEdit'])
    }
	    
}
</script>
<style scoped>
.greenBtn{
	color: #fff !important;
}
</style>
<style>
/* .tableList .el-table th:first-of-type{
	width:100px !important;
} */
 .el-table__expand-column{	
	width:60px !important;
}

</style>
